<template>
	<view>
		<view class="img">
			<image  :src="ServerInfo.imgUrl" mode=""></image>
		</view>
<view class="uvcard">
	<view class="card">
		<uni-card  :title="ServerInfo.teamName"  :thumbnail="ServerInfo.imgUrl">
			<view class="card-body">
				<view class="left">
					<view >{{ServerInfo.leaderName}}</view>
					<view class="" style="color: #ff2121;">领导人</view>
				</view>
				<view class="right">
					<view >{{ServerInfo.num}}</view>
					<view class="" style="color: #ff2121;">组织人数</view>
				</view>
			</view>
		</uni-card>
	</view>
	<view class="body">
		<view class="body-top">组织介绍</view>
		<view class="body-bottom">
			{{ServerInfo.teamInfo}}
		</view>
	</view>
	<view class="member">
    <uni-section  titleColor="#ff0000" title="成员信息" type="line">
    			<uni-card v-for="(item,i) in members" :key="i"  :title="item.userName" :sub-title="`性别:${item.sex==1?'男':'女'}  年龄:${item.age}`" :extra="`邮箱:${item.email}`" :thumbnail="item.avatar">
            <text>备注：{{item.remark}}</text>
    			</uni-card>
    </uni-section>

	</view>
</view>
		<view class="footer">
			<view class="footer-body">
        <view class="handleButton" v-if="create_by&&isServe" style="background-color: #0000ff" @click="disorg(ServerInfo.teamId)">解散组织</view>
				<view  class="handleButton" v-else-if="flage&&isServe" style="background-color: #6affc9;" @click="joinServerHandle(ServerInfo.teamId)">加入组织</view>
				<view  class="handleButton" v-else-if="!flage&&isServe" style="background-color: red;"  @click="outServerHandle(ServerInfo.teamId)" >退出组织</view>
        <view  class="handleButton" v-else-if="!create_by" style="background-color: pink" @click="diswarm">退出暖心团</view>
			</view>
		</view>
	</view>
</template>

<script>
    import { selectServerInfo,Isjoin,joinServer,outServer,getMembers,isTeamLeader,outheart,killteam} from "@/api/team/team"
	export default {
		data() {
			return {
        ServerInfo:{},
        imgUrl:"",
				flage:true,
        members:[],
        //进入者是否为创建人
        create_by:false,
        isServe:false
			};
		},
    onLoad(option)
    {
      
      //获取服务队信息
      this.getServerInfo(option.teamid);
      // console.log(option.teamid)
      //是否加入服务队
      this.getIsjoin(option.teamid);
      //获取服务队人员
      this.getTeamMembers(option.teamid);
      //获取创建人id,判断是否为创建人
      this.getcreateby(option.teamid);
      //判断进入此页面是否为服务队
      this.getisServe(option.type)
      // console.log(option)
    },
    methods:{
      getisServe(type){
        this.isServe=type
      },
      getcreateby(teamid){
        isTeamLeader(teamid).then(response=>{
          this.create_by=response.data
        })
      },
      getTeamMembers(teamid){
        getMembers(teamid).then(response=>{
          this.members=response.data
          console.log(response)
        })
      },
      getServerInfo(teamid)
      {
        selectServerInfo(teamid).then(response=>{
          // console.log(response)
          this.ServerInfo=response.data
          this.imgUrl=this.ServerInfo.imgUrl
        })
      },
      getIsjoin(teamid){
        // console.log(teamid)
        Isjoin(teamid).then(response=>{
          this.flage=response.data
          // console.log(response)
        })
      },
      joinServerHandle(teamid){
        	uni.showModal({
        		title: '提示',
        		content: '是否加入此服务队',
        		success: (res)=>{
             if (res.confirm) {
               joinServer(teamid).then(response=>{
                 this.flage=false
               })
             } else if (res.cancel) {
             	console.log('用户点击取消');
             }
            }
        	});
          //注意此处变量不能在上方函数中改，那算是拎另一个页面无法改变
          
      },
      diswarm(){
        uni.showModal({
        	title: '警告',
        	content: '是否退出此暖心团',
        	success: (res)=>{
            if (res.confirm) {
              outheart().then(response=>{
                uni.navigateTo({
                  url: '/pages/mine/index'
                })
              })
            } else if (res.cancel) {
            	console.log('用户点击取消');
            }
          }
        });
      },
      outServerHandle(teamid){
        	uni.showModal({
        		title: '提示',
        		content: '是否退出此服务队',
        		success: (res)=>{
              if (res.confirm) {
                outServer(teamid).then(response=>{
                  this.flage=true
                })
                uni.navigateTo({
                	url: '/pages/mine/organization/organization'
                })
                this.$router.go(0)
              } else if (res.cancel) {
              	console.log('用户点击取消');
              }
            }
        	});
      },
      disorg(teamid)
      {
        uni.showModal({
        	title: '警告',
        	content: '是否解散此组织',
        	success: (res)=>{
            if (res.confirm) {
              killteam(teamid).then(response=>{
                console.log(response)
                uni.navigateTo({
                  url: '/pages/mine/organization/organization'
                })
              })
            } else if (res.cancel) {
            	console.log('用户点击取消');
            }
          }
        });
      }
    }
    
	}
</script>

<style lang="scss">
	
	.decoration{
		    width: 6px;
		    height: 6px;
			margin-right: 4px;
			border-radius: 50%;
			background-color: #ff0000;
		  }
	page{
		background-color: #ffffff;
	}
	.img {
		width: 750rpx;
		height: 500rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.uvcard{
	 position: absolute;
	 width: 100%;
	 z-index: 99;
	 top: 150px;
	}
	.card{
		.card-body{
		display: flex;
		justify-content: space-between;
		
		.left{
			.name{
				color: skyblue;
				font-size: 18px;
			}
		}
		
		.right{
			text-align: center;
			.num{
				font-size: 18px;
				color: orange;
			}
		}
		
	}
	}
	
	
	
	.body{
		margin: 10px;
		
		.body-top{
			font-size: 20px;
			margin: 10px;
		}
		.body-bottom{
			// width: 400rpx;
			// height: 200rpx;
			margin: 20px;
			border:3px solid #ff2121;
			border-radius: 10px;
			padding: 10px;
		}
	}
	
	.footer{
    z-index: 999;
		width: 750rpx;
		height: 80rpx;
		position:fixed;
		
		border-radius: 20px;
		bottom:0;
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		.footer-body{
			// padding: 10px;
			
			width: 300px;
			height: 100%;
			
			text-align: center;
			line-height: 80rpx;
			font-size: 20px;
			.handleButton {
				line-height: 33px;
				border-radius: 8px;
				width: 300px;
			}
		}
	}
  .member{
    margin-bottom: 30px;
  }
  .uni-section .uni-section-header__decoration[data-v-5584ec96] {
    background-color: red;
    }
</style>
